<template>
  <div>
    <el-card style="width: 100%">
      <div slot="header" class="clearfix">
        <span>应用性能</span>
      </div>
      <div>
        <div class="card-1">
          <div>
            <div>
              <ul class="text-tips-box">
                <li>
                  <span>总共</span>
                  <span>{{ options.fail + options.success || 0 }}</span>
                </li>
                <li>
                  <span>成功</span>
                  <span>{{ options.success || 0 }}</span>
                </li>
                <li>
                  <span>失败</span>
                  <span>{{ options.fail || 0 }}</span>
                </li>
              </ul>
              <ul class="text-tips-box">
                <li>
                  <span>新增</span>
                  <span>{{ options.insert }}</span>
                </li>
                <li>
                  <span>修改</span>
                  <span>{{ options.update || 0 }}</span>
                </li>
                <li>
                  <span>删除</span>
                  <span>{{ options.delete || 0 }}</span>
                </li>
              </ul>
            </div>
            <!-- 时间分类 -->
            <div id="eventChart"></div>
            <!-- 堆积数据 -->
            <div id="queueChart"></div>
            <!-- 持久化 -->
            <div id="storageChart"></div>
            <div>
              <div id="cpuChart"></div>
              <div id="memoryChart"></div>
            </div>
          </div>
          <div id="metricTable">
            <table style="width: 100%;">
              <tbody>
                <tr v-for="(item,index) in options.metrics" :ke="index">
                  <td style="width:5%;">{{ index+1 }}</td>
                  <td>[{{ item.group }}]{{ item.metricName }}</td>
                  <td>{{ item.detail }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </el-card>

    <div style="margin: 10px 0"></div>

    <el-card style="width: 100%">
      <div slot="header" class="clearfix">
        <span>查看数据</span>
      </div>
      <mnitor-data ref="mnitor-data"></mnitor-data>
    </el-card>

    <div style="margin: 10px 0"></div>

    <el-card style="width: 100%">
      <div slot="header" class="clearfix">
        <span>查看日志</span>
      </div>
      <monitor-log ref="monitor-log"></monitor-log>
    </el-card>

  </div>
</template>

<script>
import MnitorData from "./components/monitor-data.vue";
import MonitorLog from "./components/monitor-log.vue";
import { queryAppReportMetric } from "@/api/monitor/index";
export default {
  components: {
    MnitorData,
    MonitorLog
  },
  data() {
    return {
      time: null,
      options: {
      }
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await queryAppReportMetric();
      this.options = res.resultValue;
      this.showQueueChart(res.resultValue.queueUp, res.resultValue.queueCapacity);
      this.showStorageChart(res.resultValue.storageQueueUp, res.resultValue.storageQueueCapacity);
      this.showEventChart(res.resultValue.success, res.resultValue.fail, res.resultValue.insert, res.resultValue.update, res.resultValue.delete);
      this.showCpuChart(res.resultValue.cpu);
      this.showMemoryChart(res.resultValue.memory);
      this.time = setTimeout(() => {
        this.getList();
      }, 5000);
    },

    /** 持久化 */
    showStorageChart(queueUp = 0, queueCapacity = 0) {
      let option = {
        title: {
          text: "持久化",
          x: 'center',
          y: 'top'
        },
        tooltip: {
          formatter: "{a}: {c}",
          position: 'top'
        },
        series: [
          {
            name: "待处理",
            animation: true,
            type: 'gauge',
            min: 0,
            max: queueCapacity,
            splitNumber: 2,
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']],
                width: 5
              }
            },
            axisTick: {            // 坐标轴小标记
              length: 10,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: {           // 分隔线
              length: 10,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            detail: { fontSize: 12, offsetCenter: [0, '65%'] },
            data: [{ value: queueUp, name: '' }]
          }
        ]
      };
      this.$echarts.init(document.getElementById('storageChart')).setOption(option);
    },
    /** 事件分类 */
    showEventChart(success, fail, ins = 0, upd = 0, del = 0) {
      let option = {
        title: {
          text: '事件分类',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '事件',
            type: 'pie',
            radius: '50%',
            data: [
              { value: upd, name: '更新' },
              { value: ins, name: '插入' },
              { value: del, name: '删除' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.$echarts.init(document.getElementById('eventChart')).setOption(option);
    },
    /** 堆积数据 */
    showQueueChart(queueUp = 0, queueCapacity = 100000) {
      let option = {
        title: {
          text: "堆积数据",
          x: 'center',
          y: 'top'
        },
        tooltip: {
          formatter: "{a}: {c}",
          position: 'top'
        },
        series: [
          {
            name: "待处理",
            animation: true,
            type: 'gauge',
            min: 0,
            max: queueCapacity,
            splitNumber: 2,
            axisLine: {            // 坐标轴线
              lineStyle: {       // 属性lineStyle控制线条样式
                color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']],
                width: 5
              }
            },
            axisTick: {            // 坐标轴小标记
              length: 10,        // 属性length控制线长
              lineStyle: {       // 属性lineStyle控制线条样式
                color: 'auto'
              }
            },
            splitLine: {           // 分隔线
              length: 10,         // 属性length控制线长
              lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                color: 'auto'
              }
            },
            detail: { fontSize: 12, offsetCenter: [0, '65%'] },
            data: [{ value: queueUp, name: '' }]
          }
        ]
      };
      this.$echarts.init(document.getElementById('queueChart')).setOption(option);
    },
    /** CPU */
    showCpuChart(cpu = {
      "name": [
        "10:17:19",
        "10:17:23",
        "10:17:27",
        "10:17:31",
        "10:17:36",
        "10:17:41",
        "10:17:46",
        "10:17:51",
        "10:17:56",
        "10:18:01",
        "10:18:06",
        "10:18:11"
      ],
      "value": [
        "100.00",
        "99.12",
        "94.12",
        "58.75",
        "27.44",
        "32.10",
        "29.14",
        "28.50",
        "29.73",
        "41.99",
        "69.71",
        "67.02"
      ]
    }) {
      var option = {
        title: {
          show: true,
          text: 'CPU(%)',
          x: 'center',
          y: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c}%"
        },
        xAxis: {
          type: 'category',
          data: cpu.name
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: cpu.value,
          type: 'line'
        }]
      };
      this.$echarts.init(document.getElementById('cpuChart')).setOption(option);
    },
    /** 内容 */
    showMemoryChart(memory = {
      "name": [
        "10:17:19",
        "10:17:23",
        "10:17:27",
        "10:17:31",
        "10:17:36",
        "10:17:41",
        "10:17:46",
        "10:17:51",
        "10:17:56",
        "10:18:01",
        "10:18:06",
        "10:18:11",
        "10:18:16"
      ],
      "value": [
        425.6,
        123.24,
        162.47,
        216.95,
        220.33,
        221.86,
        223.08,
        224.56,
        224.57,
        230.2,
        244.46,
        303.55,
        319.33
      ]
    }) {
      let option = {
        title: {
          show: true,
          text: '内存(MB)',
          x: 'center',
          y: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{b} : {c}MB"
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: memory.name
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: memory.value,
          type: 'line',
          areaStyle: {}
        }]
      };
      this.$echarts.init(document.getElementById('memoryChart')).setOption(option);
    }
  }
};
</script>
<style lang="scss" scoped>
.card-1 {
  display: flex;
  width: 100%;

  #metricTable {
    flex: 1;
    margin-left: 10px;

    tr {
      td {
        padding: 12px 8px;
        border-top: 1px solid #ddd;

        &:nth-of-type(2) {
          width: 200px;
        }
      }
    }
  }
}

ul {
  padding: 0;
  margin: 0;

  li {
    list-style-type: none;
  }
}

ul.text-tips-box {
  display: flex;

  &:nth-of-type(1) li:nth-of-type(1) span:nth-of-type(2) {
    background-color: #5bc0de;
  }

  &:nth-of-type(1) li:nth-of-type(2) span:nth-of-type(2) {
    background-color: #5cb85c;
  }

  &:nth-of-type(1) li:nth-of-type(3) span:nth-of-type(2) {
    background-color: #f0ad4e;
  }

  &:nth-of-type(2) {
    margin-top: 20px;
    margin-bottom: 40px;
  }

  li+li {
    margin-left: 240px;
  }

  li span:nth-of-type(2) {
    display: inline-block;
    padding: 6px 8px;
    border-radius: 4px;
    background-color: #777;
    color: #FFFFFF;
    font-weight: bold;
    margin-left: 8px;
  }
}

#queueChart,
#eventChart,
#storageChart,
#cpuChart,
#memoryChart {
  width: 266px;
  height: 260px;
  display: inline-block;
}

#memoryChart,
#cpuChart {
  width: 414px;
}

.brother+.brother {
  margin-left: 6px;
}

.table-price {
  text-align: left;
  padding-left: 40px;
}
</style>
